


// Colors
// colors for theme.
// --------------------------------------------------
$whitesmoke = #f5f5f5;
$grey-dark = #999;
$grey-dim = #666;
$black-light = #555;
$purple = #d68fe9;
$purple-dark = #b28fce;
$purple-dim = #986db2;
$purple-deep = #b854d4;

// Scaffolding
// Settings for some of the most global styles.
// --------------------------------------------------

// Global text color on <body>
$text-color = $black-light;

// Global link color.
$link-color = $purple-deep;

// Selection
$selection-bg = $purple;
$selection-color = white;

// Panel
$panel-color = #5d3523;
$panel-bg-color = #fbf4f1;
$panel-theme-bg-from-color = #fbc2eb;
$panel-theme-bg-to-color = #a6c1ee;
$panel-theme-border = #ffe4d8;

// Text Clip
$text-clip-start = #fb618d;
$text-clip-center = #8dc00a;
$text-clip-end = $purple;

// Background
$bg-white = rgba(255, 255, 255, 0.5);
$bg-white-dim = rgba(255, 255, 255, 0.65);
$bg-white-deep = rgba(255, 255, 255, 0.8);
$bg-dark = rgba(0, 0, 0, 0.1);
$bg-dark-dim = rgba(0, 0, 0, 0.2);
$bg-dark-deep = rgba(0, 0, 0, 0.3);
$bg-aplayer = rgba(178, 143, 206, 0.66);
$bg-sp-color = #f4f8fb;
$bg-dark-line = rgba(0, 0, 0, 0.08);

// Concat
$concat-email-color = $purple-dark;
$concat-github-color = #ffba84;
$concat-zhihu-color = #2ea9df;
$concat-music-color = #f596aa;

// Loading
$loading-bg = #aaaaaa;
$loading-color-one = #faaacc;
$loading-color-two = #c8aacc;
$loading-color-three = #96aacc;
$loading-color-four = #acd0ff;
$loading-color-five = #88cfff;

// Sakura
$sakura-color = #e87a90;
$sakura-color-light = #fedfe1;

// Typography
// Font, line-height, and elements colors.
// --------------------------------------------------

// Font families.
$font-family-base = 'Fira Mono', 'Noto Serif SC', -apple-system, Roboto, Helvetica Neue, sans-serif;

// Font Weight
$font-weight-normal = 400;
$font-weight-bold = 600;
$font-weight-bolder = 700;

// Font size
$font-size-base = 14px;
$font-size-icon = 24px;
$font-size-code = $font-size-base - 1px;
$font-size-normal = $font-size-base + 1px;
$font-size-small = $font-size-base - 2px;
$font-size-large = $font-size-base + 2px;
$font-size-larger = $font-size-base + 4px;
$font-size-larger-max = $font-size-base + 8px;
// Headings font size
$font-size-headings-step = 2px;
$font-size-headings-base = 24px;

// Global line height
$line-height-base = 1.6;
$line-height-block = 1.8;

// Z-index master list
// --------------------------------------------------
$zIndex-bottom = -1;
$zIndex-0 = 0;
$zIndex-1 = 1;
$zIndex-2 = 10;
$zIndex-3 = 100;
$zIndex-4 = 1000;

// Layout sizes
// --------------------------------------------------
$page-desktop = 876px;

// Padding sizes
// --------------------------------------------------
$card-padding-small = 8px 10px;
$card-padding = 12px 14px;
$card-padding-large = 14px 16px;
$code-padding = 12px 14px;

// Shadow
// --------------------------------------------------
$card-shadow = 0 0 2px 0 $bg-dark, 0px 2px 2px 0 $bg-dark-dim;
$card-shadow-hover = 0 10px 20px rgba(0, 0, 0, 0.24);
$card-shadow-base = 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.24);
$card-shadow-base-hover = 0 10px 20px $bg-dark-dim, 0 6px 6px $bg-dark-deep;
$card-shadow-light = 0 14px 38px rgba(0, 0, 0, 0.08), 0 3px 8px rgba(0, 0, 0, 0.06);
$card-shadow-light-hover = 0 14px 38px rgba(0, 0, 0, 0.14), 0 3px 8px rgba(0, 0, 0, 0.12);
$block-shadow = #aaa 0px 10px 10px -10px inset, #aaa 0px -10px 10px -10px inset;
$img-shadow = rgba(0, 0, 0, 0.2) 0 10px 12px;

// Image Assets
// --------------------------------------------------
$aplayer-bg = url(/images/reimu.png);
$gitalk-bg = url(/images/reimu.png);
$backToTop-bg = url(/images/backToTop.png);
$cursor-img = url(/images/cursor.png);
$cursor-link-img = url(/images/cursorLink.png);

// Transition
// --------------------------------------------------
$transition-base = all 0.3s ease 0s, transform 0.6s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;

// About
// --------------------------------------------------
$avatar-size-pc = 100px;
$avatar-size-sp = 80px;

$contact-size-pc = 54px;
$contact-size-sp = 48px; 
